<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="myCtrl">
      <h1>{{indexName}}</h1>
      <!-- 自定义组件 -->
      <hello-world name1="hello" name2="world"></hello-world>
    </div>

    <script>
      var app = angular.module("myApp", []);
      app.controller("myCtrl", function ($scope) {
        $scope.indexName = "主页";
        $scope.childName = "父组件自定义组件名称"
      });
      app.directive("helloWorld",function(){
          return {
            restrict:'ECMA',
            template:`
            <div>
              <h2>{{childName}}</h2>
              <div id="box"></div>
            </div>
            `,
            transclude:true,
            controller:function($scope,$element,$attrs,$transclude){
              $transclude(function(clone){
                var ele = angular.element("<div>我是新生儿</div>")
                console.log("clone",clone);
                console.log("ele",ele);
                ele.attr("id","child")
                var boxEle = document.getElementById("box")
                boxEle.append(ele[0])
              })
            }
          }
      })
    </script>

  </body>
</html>
